import QtQuick 2.2

/* 
* Transition 
*/

Rectangle {
	width: 260;
	height: 240;
	color: "#EEEEEE";
	id: rootItem;

	Rectangle {
		id: rect;
		color: "gray";
		width: 50;
		height: 50;
		anchors.centerIn: parent;

		MouseArea {
			id: mouseArea;
			anchors.fill: parent;
		}

		states: [
			State {
				id: pressState;
				name: "pressed";
				when: mouseArea.pressed;
				PropertyChanges {
					target: rect;
					color: "green";
					scale: "2.0";
				}
			}
		]
/*示例1 动画同时进行
		transitions: Transition {
			NumberAnimation {
				property: "scale";
				easing.type: Easing.InOutQuad;
				duration: 1000;
			}
			ColorAnimation {
				duration: 600;
			}
		}
*/
/*示例2 动画顺序进行
		transitions: Transition {
			SequentialAnimation {
				NumberAnimation {
					property: "scale";
					easing.type: Easing.InOutQuad;
					duration: 1000;
				}
				ColorAnimation {
					duration: 600;
				}
			}
		}
*/
/*示例3 reversible为true时，鼠标释放的动画会反过来进行，亦先变色再缩小 */
		transitions: Transition {
			to: "pressed";
			reversible: true;
			SequentialAnimation {
				NumberAnimation {
					property: "scale";
					easing.type: Easing.InOutQuad;
					duration: 1000;
				}
				ColorAnimation {
					duration: 600;
				}
			}
		}
	}
}
